<template>
  <view class="single-wrap">
		<view class="project-list">
			<view v-for="(item,index) of projectList" :key="index" class="project-item" :class="{active: currentIndex === index}" @click="handleChange(index,item)">{{item.dictName}}</view>
		</view>
		<view class="line-wrap">
			<view class="line">
				<header-title :title="headerTitle"></header-title>
				<view class="qiun-charts2" >
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts2" @touchstart="touchLineA"></canvas>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerTitle from './header'
	import uCharts from '../../../components/u-charts/u-charts/u-charts'
	import {onlyBranchGrade} from '../../../api/charts'
	import {onlinehomeworkList} from '../../../api/homework.js'
	let canvaLineA = null
	let _self
export default {
	name: 'single',
	components: {
		headerTitle
	},
  data() {
    return {
			dictId: 0,
			projectList: [],
			currentIndex: 0,
			headerTitle: '语文成绩分析',
			cWidth:'',
			cHeight:'',
			pixelRatio:1,
			lineData: {
				categories: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月'],
				series: [{
					name: '',
					data: [],
					color: '#0D84D5'
				},
				{
					name: '平均分',
					data: [],
					color: '#FB6E6E'
				}]
			}
    }
  },
	created() {
		 _self = this;
		this.cWidth=uni.upx2px(700);
		this.cHeight=uni.upx2px(400);
		this.getProject()
	},
	methods:{
		async getProject() {
			const result = []
			const analyze = '成绩分析'
			const res = await onlinehomeworkList()
			
			res.map((item) => {
				result.push({
					dictName: item.dictName,
					dictId: item.dictId
				})
			})
			this.projectList = result
			this.dictId = result[0].dictId
			this.headerTitle = `${result[0].dictName}${analyze}`
			this.lineData.series[0].name = `${result[0].dictName}${analyze}`
			this.getLineData()
		},
		handleChange(index,item) {
			const analyze = '成绩分析'
			this.currentIndex = index
			this.dictId = item.dictId
			this.headerTitle = `${item.dictName}${analyze}`
			this.lineData.series[0].name = `${item.dictName}${analyze}`
			this.getLineData()
		},
		async getLineData() {
			uni.showLoading({
				title: '加载中'
			})
			const {dictId} = this
			const res = await onlyBranchGrade({dictId})
			uni.hideLoading()
			this.lineData.series[0].data = res.score
			this.lineData.series[1].data = res.avg
			_self.showLineA('canvasLineA', this.lineData)
		},
		showLineA(canvasId,chartData){
			canvaLineA=new uCharts({
				$this:_self,
				canvasId: canvasId,
				type: 'line',
				fontSize:11,
				legend:true,
				dataLabel:false,
				dataPointShape:true,
				background:'#FFFFFF',
				pixelRatio:_self.pixelRatio,
				categories: chartData.categories,
				series: chartData.series,
				animation: true,
				xAxis: {
					type:'grid',
					gridColor:'#0D84D5',
					gridType:'dash',
					fontColor: '#0D84D5',
					// dashLength:8
				},
				yAxis: {
					gridType:'dash',
					title: '截至2018年9月',
					gridColor:'#0D84D5',
					fontColor: '#0D84D5',
					titleFontColor: '#0D84D5',
					splitNumber: 5,
					min:60,
					max:100,
					format:(val)=>{return `${Number(val)}分`}
				},
				width: _self.cWidth*_self.pixelRatio,
				height: _self.cHeight*_self.pixelRatio,
				extra: {
					line:{
						type: 'straight'
					}
				}
			});
		},
		touchLineA(e) {
			canvaLineA.showToolTip(e, {
				format: function (item, category) {
					return category + ' ' + item.name + ':' + item.data 
				}
			});
		}
	}
}

</script>
<style lang='scss' scoped>
.single-wrap{
  width: 100%;
	background-color: #f0f0f0;
	.project-list{
		display: flex;
		width: 100%;
		padding: 63upx 20upx 10upx;
		background-color: #fff;
		box-sizing: border-box;
		flex-wrap: wrap;
		justify-content: space-between;
		.project-item{
			width:162upx;
			height:75upx;
			border:2upx solid rgba(13,132,213,1);
			border-radius:10upx;
			text-align: center;
			line-height: 75upx;
			color: #0D84D5;
			font-size: 38upx;
			margin-bottom: 31upx;
		}
		.active{
			background-color: #0D84D5;
			color: #fff;
		}
	}
	.line-wrap{
		width: 100%;
		background-color: #f0f0f0;
		padding: 20upx;
		box-sizing: border-box;
		.line{
			width: 100%;
			background-color: #fff;
			height:514upx;
			border-radius:10upx;
		}
	}
}
.qiun-charts2{
	width: 100%;
	height: 400upx;
	background: #fff;
}
.charts2{
	width: 700upx;
	height: 400upx;
	background-color: #fff;
}
</style>